<template>
  <myFrame :sideBarItems="sideBarItems">
    <section id="bg" slot="background">
      <div class="bgWrapper">
        <div class="personFigure">
          <div>
          <el-upload
              action="http://192.168.13.127:8080/GlobalLove/center/setHead"
              :with-credentials="true"
              name="head_image"
              :show-file-list="false"
              :on-success="handleUpload"
          >
            <img :src="this.avatar" id="avatar" />
          </el-upload>
          </div>
          <div>
          <img class="icons" src="../assets/man.png"/>
          <span>{{this.name}}</span></div>
          <div><span>ID：{{this.id}}</span></div>
          <div>
            <img class="icons" src="../assets/phone.png"/>
            <img class="icons" src="../assets/email.png"/>
            <img class="icons" src="../assets/realname.png"/>
            <img class="icons" src="../assets/phone.png"/>
          </div>

        </div>
        <div class="slide">
          <!-- <i class="slideIcon el-icon-arrow-left"></i> -->
          <div class="slideItem"><img src="../assets/user.png"/><br/><span>小红</span></div>
          <div class="slideItem"><img src="../assets/user.png"/><br/><span>小黄</span></div>
          <div class="slideItem"><img src="../assets/user.png"/><br/><span>小乃</span></div>
          <div class="slideItem"><img src="../assets/user.png"/><br/><span>小酒</span></div>
          <!-- <i class="slideIcon el-icon-arrow-right"></i> -->
        </div>
      </div>
    </section>
    <router-view slot="content"></router-view>
  </myFrame>
</template>
<script>

  import myFrame from '../widget/frame.vue'
  import headerImage from '../assets/user.png'

  export default{
    components:{
      'myFrame':myFrame,
    },
    data(){
      return {
        avatar: '',
        name: '',
        id: '',
        sideBarItems:[
          { label: '我的资料', url:'/base/personCenter/myInfo',},
          { label: '我的相册', url:'/base/personCenter/myPhoto',},
          { label: '我的活动',url:'/base/personCenter/myActivity',},
          { label: '我的邮箱',url:'/base/personCenter/myEmail',},
          { label:'我的好友', url:'/base/personCenter/myFriend',},
          { label:'我的心情', url:'/base/personCenter/myMood',},
          { label:'账号认证', url:'/base/personCenter/accountIden',},
          { label:'择偶要求', url:'/base/personCenter/myPartner',},
          { label:'推荐对象', url:'/base/personCenter/recommend',},
          { label:'爱情专栏', url:'/base/personCenter/loveColumn',},
          { label:'账号管理', url:'/base/personCenter/manage',},
          { label:'积分兑换', url:'/base/personCenter/exchange',},
        ]
      }

    },
//<<<<<<< HEAD
//    created(){

//=======
    methods: {
      handleUpload:function(response) {
          if(response.status === "SUCCESS") {
              this.avatar='http://192.168.13.127:8080/GlobalLove/' + response.object.headImgUrl
          }
      }
    },
    created:function() {
      var user = JSON.parse(window.sessionStorage.getItem('user'));
      this.name = user.nickname;
      this.id = user.id;
      if(user!=null && user.headImgUrl!=null) {
        this.avatar = 'http://192.168.13.127:8080/GlobalLove/' + user.headImgUrl;
      }else {
        this.avatar = headerImage;
      }
//>>>>>>> 24614d1eebb550f0d289b1ed820c7cbee79b360c
    }
  }
</script>
<style scoped>
  #avatar {
    width:100%;
    height:100%;
    max-width: 120px;
    max-height: 120px;
  }
  #bg{
    height:400px;
    background-image: url("../assets/personal_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    margin: 15px 100px;
  }
  .bgWrapper{
    position: relative;
    top: 35%;
    height: 210px;
    margin: 0px 100px;
  }
  .bgWrapper>div{
    border-radius: 25px;
  }
  .personFigure{
    float: left;
    height: inherit;
    padding: 15px 30px;
    background-color: rgba(255,255,255,0.7);
  }
  .personFigure>div{
    padding: 2px;
    text-align: center;
  }
  .slide{
    float: right;
    display: flex;
    align-items: center;
    height:inherit;
    background-color: rgba(255,255,255,0.7);
  }
  .slideItem{
    padding: 0px 20px;
    text-align: center;
  }
  .slide>.slideIcon{
    font-size: 30px;
    color: #fbb7c8;;
  }
  .icons{
    width: 20px;
    height: 20px;
    padding: 2px;
    box-sizing: content-box;
  }
</style>